[Day 21]

說明:嘗試使用下圖片套件，在前端頁面就可以對圖片進行預先處理，再發送檔案到後端server。
有好用的工具當然要用看看，避免重複造輪子。

預先條件:vue版本 > 2

一、安裝

npm i vue-core-image-upload --save

二、引入使用

import VueCoreImageUpload  from 'vue-core-image-upload';

三、html dom

<vue-core-image-upload
  :class="['btn', 'btn-primary']"
  :crop="true"
  @imageuploaded="imageuploaded"
  :data="data"
  :max-file-size="5242880"
  url="http"//localhost:3310" >
</vue-core-image-upload>

四、設定proxy

   '/picture': {
      target: "http://localhost:3310",  //node express api的url位置
      changeOrigin: true,
      pathRewrite: {
        '^/picture': 'picture'
      }
    }

圖片一樣是需要上傳到後端server,記得要加上proxy

參考來源:https://github.com/Vanthink-UED/vue-core-image-upload

[Day21結束]